<!--抄送我的详情-->
<template>
  <div class="attendanceApplyPassContainer">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <!--考勤人开始-->
    <div class="content">
      <div class="kaoqinName">
        <van-image
          v-if="detailContent.avatar"
          round
          width="45px"
          height="45px"
          :src="`http://www.kdehw.com:83/uploads/images/user/${detailContent.avatar}`"
          fit="cover"
          class="kaoqintx"
        />
        <p class="txphoto1" v-else>{{substringname(detailContent.name)}}</p>
        <div>
          <p class="name">{{detailContent.name}}</p>
          <p class="title status3" v-if="detailContent.status==1">等待审批</p>
          <p class="title status3" v-if="detailContent.status==2">等待审批</p>
          <p class="title" v-if="detailContent.status==3">已完成</p>
          <p class="title" v-if="detailContent.status==4">已撤销</p>
          <p class="title status1" v-if="detailContent.status==5">审批通过</p>
          <p class="title status2" v-if="detailContent.status==6">审批拒绝</p>
        </div>
      </div>
      <!--考勤人结束-->
      <div class="PassContent" v-if="detailContent">
        <!--请假类型开始-->
        <div v-if="detailType==1">
          <p>
            <span class="title">请假类型</span>
            <span class="content">{{detailContent.form_data.type}}</span>
          </p>
          <p>
            <span class="title">开始时间</span>
            <span class="content">{{detailContent.form_data.start_date}}</span>
          </p>
          <p>
            <span class="title">结束时间</span>
            <span class="content">{{detailContent.form_data.end_date}}</span>
          </p>
          <p>
            <span class="title">请假时长</span>
            <span class="content">{{detailContent.form_data.leave_time}}天</span>
          </p>
          <p>
            <span class="title">请假事由</span>
            <span class="content">{{detailContent.form_data.leave_info}}</span>
          </p>
        </div>
        <!--请假类型结束-->
        <!--出差类型开始-->
        <div v-if="detailType==2">
          <p>
            <span class="title">开始时间</span>
            <span class="content">{{detailContent.form_data.start_date}}</span>
          </p>
          <p>
            <span class="title">结束时间</span>
            <span class="content">{{detailContent.form_data.end_date}}</span>
          </p>
          <p>
            <span class="title">出差时长</span>
            <span class="content">{{detailContent.form_data.leave_time}}天</span>
          </p>
          <p>
            <span class="title">出差事由</span>
            <span class="content">{{detailContent.form_data.leave_info}}</span>
          </p>
          <p>
            <span class="title">交通工具</span>
            <span class="content" v-if="detailContent.form_data.travel_tools==1">火车</span>
            <span class="content" v-if="detailContent.form_data.travel_tools==2">飞机</span>
            <span class="content" v-if="detailContent.form_data.travel_tools==3">汽车</span>
            <span class="content" v-if="detailContent.form_data.travel_tools==4">其他</span>
          </p>
          <p>
            <span class="title">单程往返</span>
            <span class="content" v-if="detailContent.form_data.one_way==1">单程</span>
            <span class="content" v-if="detailContent.form_data.one_way==2">往返</span>
          </p>
          <p>
            <span class="title">出发城市</span>
            <span class="content">{{detailContent.form_data.go_city}}</span>
          </p>
          <p>
            <span class="title">到达城市</span>
            <span class="content">{{detailContent.form_data.to_city}}</span>
          </p>
          <p>
            <span class="title">报销金额</span>
            <span class="content">{{detailContent.form_data.money}}元</span>
          </p>
        </div>
        <!--出差类型结束-->
        <!--车辆维修类型开始-->
        <div v-if="detailType==3">
          <p>
            <span class="title">车牌号码</span>
            <span class="content">{{detailContent.form_data.license_plate}}</span>
          </p>
          <p>
            <span class="title">开始时间</span>
            <span class="content">{{detailContent.form_data.start_date}}</span>
          </p>
          <p>
            <span class="title">结束时间</span>
            <span class="content">{{detailContent.form_data.end_date}}</span>
          </p>
          <p>
            <span class="title">维修时间</span>
            <span class="content">{{detailContent.form_data.maintenance_time}}天</span>
          </p>
          <p>
            <span class="title">维修说明</span>
            <span class="content">{{detailContent.form_data.maintenance_info}}</span>
          </p>
          <p>
            <span class="title">维修金额</span>
            <span class="content">{{detailContent.form_data.money}}元</span>
          </p>
          <p>
            <span class="title">维修地址</span>
            <span class="content">{{detailContent.form_data.maintenance_address}}</span>
          </p>
        </div>
        <!--车辆维修结束-->
        <!--费用类型开始-->
        <div v-if="detailType==4">
          <p>
            <span class="title">申请事由</span>
            <span class="content">{{detailContent.form_data.apply_info}}</span>
          </p>
          <p>
            <span class="title">申请金额</span>
            <span class="content">{{detailContent.form_data.money}}元</span>
          </p>
          <p>
            <span class="title">付款对象</span>
            <span class="content">{{detailContent.form_data.payment_object}}</span>
          </p>
          <p>
            <span class="title">支付方式</span>
            <span class="content" v-if="detailContent.form_data.payment_type==1">现金</span>
            <span class="content" v-if="detailContent.form_data.payment_type==2">支付宝</span>
            <span class="content" v-if="detailContent.form_data.payment_type==3">微信</span>
            <span class="content" v-if="detailContent.form_data.payment_type==4">其他</span>
          </p>
          <p>
            <span class="title">付款日期</span>
            <span class="content">{{detailContent.form_data.payment_date}}</span>
          </p>
        </div>
        <!--费用类型结束-->
        <!--采购物资类型开始-->
        <div v-if="detailType==5">
          <p>
            <span class="title">申请事由</span>
            <span class="content">{{detailContent.form_data.apply_info}}</span>
          </p>
          <p>
            <span class="title">采购类型</span>
            <span class="content" v-if="detailContent.form_data.procurement_type==1">办公用品</span>
            <span class="content" v-if="detailContent.form_data.procurement_type==2">补充车辆</span>
            <span class="content" v-if="detailContent.form_data.procurement_type==3">清扫物资</span>
            <span class="content" v-if="detailContent.form_data.procurement_type==3">工服</span>
            <span class="content" v-if="detailContent.form_data.procurement_type==3">其他</span>
          </p>
          <p>
            <span class="title">支付方式</span>
            <span class="content" v-if="detailContent.form_data.payment_type==1">现金</span>
            <span class="content" v-if="detailContent.form_data.payment_type==2">支付宝</span>
            <span class="content" v-if="detailContent.form_data.payment_type==3">微信</span>
            <span class="content" v-if="detailContent.form_data.payment_type==4">其他</span>
          </p>
          <p>
            <span class="title">交付日期</span>
            <span class="content">{{detailContent.form_data.expect_date}}</span>
          </p>
          <p>
            <span class="title">采购品名,规格,数量</span>
            <span class="content">{{detailContent.form_data.details}}</span>
          </p>

          <p>
            <span class="title">供应商或淘宝链接</span>
            <span class="content">{{detailContent.form_data.procurement_link}}</span>
          </p>
        </div>
        <!--公务招待类型开始-->
        <div v-if="detailType==6">
          <p>
            <span class="title">申请事由</span>
            <span class="content">{{detailContent.form_data.apply_info}}</span>
          </p>
          <p>
            <span class="title">招待金额</span>
            <span class="content">{{detailContent.form_data.money}}元</span>
          </p>
          <p>
            <span class="title">招待日期</span>
            <span class="content">{{detailContent.form_data.expect_date}}</span>
          </p>
          <p>
            <span class="title">支付方式</span>
            <span class="content" v-if="detailContent.form_data.payment_type==1">现金</span>
            <span class="content" v-if="detailContent.form_data.payment_type==2">支付宝</span>
            <span class="content" v-if="detailContent.form_data.payment_type==3">微信</span>
            <span class="content" v-if="detailContent.form_data.payment_type==4">其他</span>
          </p>
          <p>
            <span class="title">招待对象</span>
            <span class="content">{{detailContent.form_data.company}}</span>
          </p>
          <p>
            <span class="title">招待人数</span>
            <span class="content">{{detailContent.form_data.number}}</span>
          </p>
        </div>
        <!--请款类型开始-->
        <div v-if="detailType==7">
          <p>
            <span class="title">申请事由</span>
            <span class="content">{{detailContent.form_data.apply_info}}</span>
          </p>
          <p>
            <span class="title">申请金额</span>
            <span class="content">{{detailContent.form_data.money}}元</span>
          </p>
          <p>
            <span class="title">付款日期</span>
            <span class="content">{{detailContent.form_data.payment_date}}</span>
          </p>
          <p>
            <span class="title">付款对象</span>
            <span class="content">{{detailContent.form_data.payment_object}}</span>
          </p>
          <p>
            <span class="title">支付方式</span>
            <span class="content" v-if="detailContent.form_data.payment_type==1">现金</span>
            <span class="content" v-if="detailContent.form_data.payment_type==2">支付宝</span>
            <span class="content" v-if="detailContent.form_data.payment_type==3">微信</span>
            <span class="content" v-if="detailContent.form_data.payment_type==4">其他</span>
          </p>
        </div>
        <!--发放工资类型开始-->
        <div v-if="detailType==8">
          <p>
            <span class="title">发放工资金额</span>
            <span class="content">{{detailContent.form_data.money}}元</span>
          </p>
          <p>
            <span class="title">发放日期</span>
            <span class="content">{{detailContent.form_data.payment_date}}</span>
          </p>
          <p>
            <span class="title">申请事由</span>
            <span class="content">{{detailContent.form_data.apply_info}}</span>
          </p>
        </div>
        <!--发放工资类型结束-->
      </div>
      <div class="divheight"></div>
      <ul class="passapprovecontent">
        <!--申请人-->
        <li class="passapprovestep">
          <div class="borderleft borderlefttop"></div>
          <div class="passapprovestep_left">
            <div class="tx">
              <van-image
                v-if="detailContent.avatar"
                round
                width="45px"
                height="45px"
                :src="`http://www.kdehw.com:83/uploads/images/user/${detailContent.avatar}`"
                fit="cover"
                class="kaoqintx"
              />
              <p class="txphoto" v-else>{{substringname(detailContent.name)}}</p>
              <van-icon name="checked" class="icon checkedpass" />
            </div>
            <div class="desc">
              <p class="bigtitle">发起申请</p>
              <p class="smalltitle">{{detailContent.name}}</p>
            </div>
          </div>
          <div class="passapprovestep_right">{{substringTime(detailContent.create_date)}}</div>
        </li>
        <!--审批人-->
        <li class="passapprovestep" v-for="(item , index ) in stepapprover" :key="index">
          <div class="borderleft borderleftbot"></div>
          <div class="passapprovestep_left passapprovestep_left1">
            <div class="tx">
              <van-image
                v-if="item.avatar"
                round
                width="45px"
                height="45px"
                :src="`http://www.kdehw.com:83/uploads/images/user/${item.avatar}`"
                fit="cover"
                class="kaoqintx"
              />
              <p class="txphoto" v-else>{{substringname(item.name)}}</p>
              <van-icon name="checked " class="icon checkedpass" v-if="item.detail_status==2" />
              <van-icon
                name="more"
                class="icon"
                :class="item.detail_status==1?'checkedpass1':'checkedhui'"
                v-else
              />
            </div>
            <div class="desc">
              <div class="title-prover">
                <span class="bigtitle">审批人</span>
                <span class="time">{{substringTime(item.create_date)}}</span>
              </div>
              <!-- <p class="bigtitle">审批人</p> -->
              <p class="smalltitle">
                {{item.name}}
                <span v-if="item.detail_status==1">(待处理)</span>
                <span v-if="item.detail_status==2">(已同意)</span>
                <span v-if="item.detail_status==3">(拒绝)</span>
              </p>
              <p class="comment">{{item.comment}}</p>
            </div>
          </div>

          <!-- <div class="passapprovestep_right">{{substringTime(item.create_date)}}</div> -->

          <!-- <p class="comment">{{item.comment}}</p> -->
        </li>
        <!--抄送人-->
        <li class="passapprovestep" v-for="(item , index )  in stepcc_people" :key="index+1000">
          <div class="borderleft borderleftbot"></div>
          <div class="passapprovestep_left">
            <div class="tx">
              <van-image
                v-if="item.photo"
                round
                width="45px"
                height="45px"
                :src="`http://www.kdehw.com:83/uploads/images/user/${item.photo}`"
                fit="cover"
                class="kaoqintx"
              />
              <p class="txphoto" v-else>{{substringname(item.name)}}</p>
              <van-icon name="checked " class="icon checkedpass" v-if="item.status==2" />

              <van-icon
                name="more"
                class="icon"
                :class="iscopy===true?'checkedpass1':'checkedhui'"
                v-else
              />
            </div>
            <div class="desc">
              <p class="bigtitle">抄送人</p>
              <p class="smalltitle">
                {{item.name}}
                <span class="status3" v-if="item.status==1">(未读)</span>
                <span v-if="item.status==2">(已读)</span>
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import CommonBar from "../common/commonBar";
export default {
  components: {
    CommonBar
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      options: {
        type: "icon",
        centerText: "",
        iconNname: "wap-home",
        lefttype: "left"
      },

      stepapprover: [],
      stepcc_people: [],
      detailId: "",
      detailContent: "",
      days: "",
      hours: "",
      detailType: "",
      iscopy: false
    };
  },
  created() {
    this.detailId = this.$route.query.id;
    this.detailType = this.$route.query.type;
    this.options.centerText = this.showType(this.detailType);
    this.GetLeaveDetail();
    this.GetOperationList();
  },
  methods: {
    //截取日期
    substringTime(str) {
      if (str) {
        return str.substring(0, str.length - 3);
      }
    },
    //取头像
      substringname(username) {
      if (username) {
        if (username.length >= 3) {
          return username.substr(username.length - 2, 2);
        } else {
          return username;
        }
      }
    },
    showType(type) {
      var centerText = "";
      if (type == 1) {
        centerText = "请假申请";
      } else if (type == 2) {
        centerText = "出差申请";
      } else if (type == 3) {
        centerText = "车辆维修申请";
      } else if (type == 4) {
        centerText = "费用审批申请";
      } else if (type == 5) {
        centerText = "物资采购申请";
      } else if (type == 6) {
        centerText = "公务招待申请";
      } else if (type == 7) {
        centerText = "请款申请";
      } else if (type == 8) {
        centerText = "工资发放申请";
      }

      return centerText;
    },
    GetLeaveDetail() {
      var params = {
        token: this.token,
        leave_id: this.detailId,
        is_cc_people: 1
      };
      this.$toast.loading({
        mask: true,
        message: "加载中...",
        duration: 5000
      });
      this.$http
        .get(`${this.$basePath}?service=App.Leave.GetLeaveDetail&api=89`, {
          params: params
        })
        .then(res => {
          if (res.ret == 200) {
            this.$toast.clear();
            //console.log("请假详情", res);
            this.detailContent = res.data;

            //    var leavea = my_time / 1000 / 60 / 60 / 24;
            // this.days = res.data.form_data.leave_time.split(".")[0];
            // this.hours = res.data.form_data.leave_time.split(".")[1];
          } else {
            this.$toast({ message: res.msg });
          }
        });
    },
    GetOperationList() {
      var params = {
        token: this.token,
        leave_id: this.detailId
      };
      this.$http
        .get(`${this.$basePath}?service=App.Leave.GetOperationList&api=89`, {
          params: params
        })
        .then(res => {
          if (res.ret == 200) {
            //console.log("审批人操作", res);
            this.stepapprover = res.data["approver"];
            this.stepcc_people = res.data["cc_people"];
            var end = this.stepapprover.slice(-1);
            //判断抄送状态
            if (end[0].detail_status == 2) {
              this.iscopy = true;
            }
          } else {
            this.$toast({ message: res.msg });
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/css/approve";
.bigtitle {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.smalltitle {
  margin: 0;
}
.borderlefttop {
  // height: 54px !important;
  top: 10px !important;
}
.borderleftbot {
  // height: 54px !important;
  bottom: 10px !important;
}
.txphoto {
  width: 45px;
  height: 45px;
  background: rgba(10, 213, 145, 1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 0;
}
.txphoto1 {
  width: 45px;
  height: 45px;
  background: rgba(10, 213, 145, 1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 0 10px 0 0;
}
.status3 {
  color: #ff6600;
}
</style>